vue3组件动态缓存与动态刷新

您所在的位置：网站首页 › vue store的缓存数据 › vue3组件动态缓存与动态刷新

vue3组件动态缓存与动态刷新

#vue3组件动态缓存与动态刷新| 来源: 网络整理| 查看: 265

动态缓存前言

在项目中，为了减少性能消耗，有时我们需要使用keep-alive把组件缓存起来，但是并不是所有组件都需要被缓存，那么如何控制那些组件需要缓存呢？主要使用到路由meta，路由前置守卫，vux，动态组件。

实现

APP.vue

import { ref,computed } from 'vue' import { useRouter } from 'vue-router' import { useAlertsStore } from './store/modules/app.js' const store = useAlertsStore() const includes = computed(()=>{ return store.$state.includes }) const router = useRouter() const tohome = ()=>{ router.push('/home') } const totest = ()=>{ router.push('/test') } home test .bg { background-color: pink; }

路由index.js

import { createRouter, createWebHashHistory } from 'vue-router' import { useAlertsStore } from '../store/modules/app.js' const routes = [ { path: '/', redirect: '/home' }, { // 导入的.vue组件名必须和组件注册的名字一致文件名最好全小写组件首字母最好大写 path: '/home', name: 'home', component: () => import('../views/home.vue'), meta: { name: 'home', keepAlive: true } }, { path: '/test', name: 'test', component: () => import('../views/testtwo.vue'), meta: { name: 'test', keepAlive: false } }, ] const router = createRouter({ history: createWebHashHistory(), routes, }) router.beforeEach((to, from, next) => { const store = useAlertsStore() if (to.meta.keepAlive && to.name) { store.setincludes({ name: to.name }) } next() // 如果没传next 可以不用调用next函数也能跳转 }) export default router

vuex

state: () => { return { includes: [], } }, actions: { // 添加需要缓存的组件 setincludes(payload) { this.$state.includes = [...new Set([...this.$state.includes, payload.name])] }, 动态刷新前言

组件已经被我们缓存了，自然也不会重新发起网络请求请求新的数据，但是在某些情况下我们需要被缓存起来的页面重新发起ajax请求数据，这又该如何实现呢？这里主要使用到了发布订阅的思想。

实现

我们可以写一个自定义hook来封装它。 useRefreshFun

import { useAlertsStore } from '../store/modules/app.js' import { computed, onActivated, nextTick } from 'vue' import { useRoute } from 'vue-router' export default function () { const refresh = (paramsList) => { const store = useAlertsStore() const refreshApiList = computed(() => store.$state.refreshApiList || []) const refreshApiFun = (pageName) => { //当前缓存页面没有配置刷新接口 if (!paramsList) return //获取该缓存页面中的vuex的api列表 const current = refreshApiList.value.find( (item) => item.pageName.toLocaleUpperCase() == pageName.toLocaleUpperCase() ) // 无需要刷新的api if (!current) return current.funsName.forEach((funName) => { //vuex中的当前页面缓存的api集合 const refitem = paramsList.find((refitem) => funName === refitem.name) //如果方法存在则刷新 if (refitem !== undefined) refitem.funsName.forEach((fun) => fun()) }) nextTick(() => store.removeRefreshApi(pageName)) } // 组件被激活 onActivated(() => { const route = useRoute() const pageName = route.name refreshApiFun(pageName) }) } // 添加刷新api const addRefreshList = (apiParams) => { const store = useAlertsStore() store.addRefreshApi(apiParams) } return { refresh, addRefreshList } }

vux

import { defineStore } from 'pinia' // 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`) // 第一个参数是你的应用中 Store 的唯一 ID。 export const useAlertsStore = defineStore('alerts', { state: () => { return { includes: [], refreshApiList: [] } }, actions: { // 添加需要缓存的组件 setincludes(payload) { this.$state.includes = [...new Set([...this.$state.includes, payload.name])] }, // 添加需要刷新的api addRefreshApi(payload) { const refreshApiList = this.$state.refreshApiList || [] const current = refreshApiList.find((item) => item.pageName === payload.pageName) if (current) { const addFunNames = payload.funsName.filter((item) => !current.funsName.includes(item)) current.funsName.push(...addFunNames) } else { this.$state.refreshApiList.push({ pageName: payload.pageName, funsName: payload.funsName }) } }, // 删除需要刷新的api removeRefreshApi(pageName) { const refreshApiList = this.$state.refreshApiList || [] const index = refreshApiList.findIndex((item) => item.pageName === pageName) index !== -1 && this.$state.refreshApiList.splice(index, 1) }, } })

在页面中使用 home.vue写入需要刷新的接口

home

- + import { ref } from 'vue' import useRefreshFun from '../hooks/useRefreshFun.js' let num = ref(0) const queryAll = ()=>{ num.value = 0 } const { refresh } = useRefreshFun() refresh([{name:'init',funsName:[queryAll]}])

test.vue为触发刷新的组件

test

- + 触发home组件动态刷新 import { ref } from 'vue' import useRefreshFun from '../hooks/useRefreshFun.js' let num = ref(0) const { addRefreshList } = useRefreshFun() const refresh = ()=>{ addRefreshList({ pageName: 'home', funsName: ['init'] }) }

【本文地址】

vue3组件动态缓存与动态刷新

vue3组件动态缓存与动态刷新

今日新闻

推荐新闻